<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">

	<title>商品详情</title>
	<link rel="stylesheet" href="../css/mui.min.css" />
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" href="../iconfont/iconfont.css" />
	<link rel="stylesheet" href="product.detail.css" />
</head>
<body>
	<!-- 顶部导航 开始 -->
	<header class="header">
		<a class="mui-pull-left mui-action-back pad-h-md pad-v">
			<i class="iconfont icon-back"></i>
		</a>
	</header>
	<!-- 顶部导航 结束 -->

	<!--轮播图 开始-->
	<div id="product-image-slider" class="mui-slider">
		<div class="mui-slider-group mui-slider-loop">
			<!-- 第一张 -->
			<div class="mui-slider-item mui-text-center">
				<a href="javascript:;">
					<img src="../image/icon-no-image.png" data-preview-src="" data-preview-group="1">
				</a>
			</div>
		</div>
	</div>
	<!--轮播图 结束-->

	<!--标题 开始-->
	<div class="content">
		<div class="mui-row goods-info-title">
			<span class="mui-col-xs-10 mgn pad-h-sm product-title">&nbsp;</span>
			<div class="pad-v-sm btn-share">
				<i class="iconfont icon-fenxiang"></i>
				<label>分享</label>
			</div>
		</div>

		<div class="mui-row pad-h-sm">
			<span class="mui-block mui-col-xs-12 new-price">
				<label class="color-red">￥<a class="color-red">0.00</a></label>
				<sub class="bg-red mgn-h mui-hidden">新春上新</sub>
			</span>
			<span class="mui-block mui-col-xs-12 old-price pad-v-sm">
				<label>价格：</label>
				<del>￥0.00</del>
			</span>
		</div>
	</div>
	<!--标题 结束-->

	<!--选择尺码-->
	<div class="pad-v mgn-v-md select">
		<label class="pad">选择颜色分类</label>
		<i class="iconfont icon-right mui-pull-right"></i>
	</div>
	<!--选择尺码-->
	
	<!-- 商品详情 开始 -->
	<div class="mui-row">
		<div class="mui-col-xs-12 pad-v mgn-v white bdr-v">
			<label class="pad">图文详情</label>
		</div>
		<div class="mui-col-xs-12">
			<p class="product-desc pad-h"></p>
		</div>
	</div>
	<!-- 商品详情 结束 -->
	
	<div class="">

		<!--评论一 开始-->
		<div class="mui-col-xs-12 comment-list">
		</div>
		<!--评论一 结束-->
		
		<!--相关商品 开始-->
		<div class="mui-col-xs-12 related-list">
		</div>
		<!--相关商品 结束-->
		<div class="pad-v-lg"></div>

		<div class="mui-row white no-pad mui-text-center buy">
			<div class="mui-col-xs-4 btn-collect">
				<button class="no-bdr no-pad no-mgn">
					<i class="iconfont icon-favorite"></i>收藏
				</button>
			</div>
			<div class="mui-col-xs-4 btn-cart-later">
				<button class="no-bdr no-pad no-mgn jiarugouwuche">加入购物车</button>
			</div>
			<div class="mui-col-xs-4 btn-buy-later">
				<button class="no-bdr no-pad no-mgn lijigoumai">立即购买</button>
			</div>
		</div>
	</div>

	<div class="white tanchuang">
		<div class="tc-1 pad-h-md holder-now-sku-pro">
			<div class="white mui-pull-left tc-1-img">
				<img src="../image/1.png" />
			</div>
			<div class="tc-1-right">
				<div class="text-primary now-sku-price"><strong>￥0</strong></div>
				<div class="now-sku-storage">库存 0 件</div>
				<div class="mui-hidden">已选：“拿破仑（4.7寸6/6s通用）”</div>
				<i class="iconfont icon-iconcha pad-h-md pad-v-md"></i>
			</div>
		</div>
		<div class="tc-2 pad-h-md product-sku-holder">
		</div>
		<div class="pad-h-md pad-v mgn-v-sm tc-3">
			<label>购买数量</label>
			<div class="mui-pull-right add-minus">
				<a class="minus">-</a>
				<input class="no-bdr no-pad mui-inline" type="text" value="1" />
				<a class="add">+</a>
			</div>
		</div>
		<div class="mui-row">
			<div class="mui-col-xs-6">
				<button type="button" class="mui-btn btn-cart-now no-rds no-mgn no-pad-v mui-btn-block text-white">加入购物车</button>
			</div>
			<div class="mui-col-xs-6">
				<button type="button" class="mui-btn btn-buy-now no-rds no-mgn no-pad-v mui-btn-block text-white">立即购买</button>
			</div>
		</div>
	</div>
	<!-- 商品轮播图片模板 开始 -->
	<script type="text/html" id="tpl-product-image">
		<div class="mui-slider-group mui-slider-loop">
		{{each data.goods_extend.slide as item idx}}
		{{if idx == data.goods_extend.slide.length -1}}
		<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
		<div class="mui-slider-item mui-slider-item-duplicate">
			<a href="javascript:;">
				<img src="{{item | image}}" data-preview-src="" data-preview-group="1">
			</a>
		</div>
		{{/if}}
		
		<!-- 第一张 -->
		<div class="mui-slider-item">
			<a href="javascript:;">
				<img src="{{item | image}}" data-preview-src="" data-preview-group="1">
			</a>
		</div>
		
		{{if 0 == idx}}
		<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
		<div class="mui-slider-item mui-slider-item-duplicate">
			<a href="javascript:;">
				<img src="{{item | image}}" data-preview-src="" data-preview-group="1">
			</a>
		</div>
		{{/if}}
		{{/each}}
		</div>
		
		<div class="mui-slider-indicator mui-hidden">
			<div class="mui-indicator mui-active"></div>
			{{each data.goods_extend.slide as item idx}}
			<div class="mui-indicator"></div>
			{{/each}}
			<div class="mui-indicator"></div>
		</div>
	</script>
	<!-- 商品轮播图片模板 结束 -->
	
	<!-- 商品规格模板 开始 -->
	<script type="text/html" id="tpl-product-sku">
		{{each data.spec as sku}}
		<div class="mui-row sku-group" data-id="{{sku.attr.attr_id}}">
			<div class="mui-col-xs-12">
				<div class="">{{sku.attr.attr_name}}</div>
			</div>
			<div class="mui-col-xs-12">
				{{each sku.attr_val as one}}
				<label class="pad-v-sm sku" data-id="{{one.attr_val_id}}">
					<input type="radio" name="sku_{{sku.attr.attr_id}}" value="{{one.attr_val_id}}">
					<span>{{one.attr_val_name}}</span>
				</label>
				{{/each}}
			</div>
		</div>
		{{/each}}
	</script>
	<!-- 商品规格模板 结束 -->
	
	<!-- 最新选择的规格的商品价格信息模板 开始 -->
	<script type="text/html" id="tpl-now-sku-pro">
		<div class="white mui-pull-left tc-1-img">
			<img src="{{data.thumb | thumb}}" />
		</div>
		<div class="tc-1-right">
			<div class="text-primary now-sku-price"><strong>￥{{data.goods_price | price}}</strong></div>
			<div class="now-sku-storage" data-storage="{{data.goods_storage || '0'}}">库存 {{data.goods_storage || '0'}} 件</div>
			<div class="mui-hidden">已选：“拿破仑（4.7寸6/6s通用）”</div>
			<i class="iconfont icon-iconcha"></i>
		</div>
	</script>
	<!-- 最新选择的规格的商品价格信息模板 结束 -->
	
	<!--评论数据模板 开始-->
	<script type="text/template" id="tpl-comment">
		{{if !data || data.length == 0}}
		<div class="mui-row">
			<div class="mui-col-xs-12 mui-text-center mgn-v-md">
				暂无评论
			</div>
		</div>
		<div class="mui-row">
			<div class="mui-col-xs-4"></div>
			<div class="mui-col-xs-4">
				<img src="../image/icon-no-image.png" class="responsive" />
			</div>
		</div>
		{{/if}}
		{{each data as item}}
		<!--头像 名字-->
		<div class="mui-row pad-h pad-v-sm comment-title">
			<div class="mui-col-xs-3 comment-title-img">
				<img src="{{avatar(item.user_info.avatar)}}" />
			</div>
			<div class="mui-col-xs-9 pad-h-md pad-v-md">
				<label>{{item.user_info.nicname || item.user_info.username}}</label>
			</div>
		</div>
		<!--评论内容-->
		<div class="pad-h-sm pad-v-sm comment-content">
			<p class="mui-text-left">{{item.content}}</p>
		</div>
		<!--评论附加的图片-->
		<div class="mui-row mui-text-left comment-images">
			{{each item.images as picture}}
			<div class="mui-col-xs-1 mgn-h-sm pingluntupian">
				<img src="{{picture | thumb}}" data-preview-src="" data-preview-group="2" />
			</div>
			{{/each}}
		</div>

		<!--赞 评论 浏览次数-->
		<div class="pad-h-sm comment-com">
			<label>{{item.create_time}}</label>
			<span class="mui-pull-right mgn-h-md">
				<i class="iconfont icon-pinglun mui-hidden">评论</i>
				<i class="iconfont icon-down"> {{item.likes}}</i>
			</span>
		</div>
		{{/each}}
		<div class="mui-text-center look-btn pad-v">
			<button class="pad-v-sm pad-h-md btn-view-comment">查看全部评论</button>
		</div>
	</script>
	<!--评论数据模板 结束-->
	
	<!--相关商品 开始-->
	<script type="text/template" id="tpl-related">
		{{if data.related && data.related.length > 0}}
		<div class="pad-v"></div>
		<div class="mui-row">
			<div class="mui-col-xs-12 pad-v mgn-v white bdr-v">
				<label class="pad">相关商品</label>
			</div>
		</div>
		<div class="mui-row white">
			{{each data.related as item idx}}
			<div class="mui-col-xs-3 related-product" data-id="{{item.id}}">
				<img src="{{image(item.thumb, '_0_100')}}" />
				<p class="text-title mui-ellipsis">{{item.title}}</p>
				<p class="mui-text-right text-price">￥{{price(item.goods_price)}}</p>
			</div>
			{{/each}}
		</div>
		{{/if}}
	</script>
	<!--相关商品 结束-->
	
	<script type="text/javascript" src="../js/mui.min.js"></script>
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/template.js"></script>
	<script type="text/javascript" src="../js/app.js"></script>
	<script type="text/javascript" src="../js/mui.zoom.js"></script>
	<script type="text/javascript" src="../js/mui.previewimage.js"></script>
	<script type="text/javascript" src="product.detail.js" ></script>
</body>
</html>